<!--
 * @Author: Vben
 * @Description: Arrow component with animation
-->
<template>
  <span :class="getClass">
    <Icon :icon="icon || 'ion:chevron-forward'" :style="$attrs.iconStyle" />
  </span>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { useDesign } from '/@/hooks/web/useDesign';

  const props = defineProps({
    /**
     * Arrow expand stateStyleValue
     */
    expand: { type: Boolean },
    icon: { type: String },
    /**
     * Arrow up by default
     */
    up: { type: Boolean },
    deg: { type: Number, default: 90 },
    /**
     * Arrow down by default
     */
    down: { type: Boolean },
    /**
     * Cancel padding/margin for inline
     */
    inset: { type: Boolean },
  });

  const { prefixCls } = useDesign('basic-arrow');

  // get component class
  const getClass = computed(() => {
    const { expand, up, down, inset, deg = 90 } = props;

    return [
      prefixCls,
      {
        [`${prefixCls}-${deg}`]: true,
        [`${prefixCls}-${deg}-active`]: expand,
        up,
        inset,
        down,
      },
    ];
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-basic-arrow';

  .@{prefix-cls} {
    display: inline-block;
    cursor: pointer;
    transform: rotate(0deg);
    transition: all 0.3s ease 0.1s;
    transform-origin: center center;

    &-90 {
      &-active {
        transform: rotate(90deg);
      }

      &.up {
        transform: rotate(-90deg);
      }

      &.down {
        transform: rotate(90deg);
      }

      &.up.@{prefix-cls}-90-active {
        transform: rotate(90deg);
      }

      &.down.@{prefix-cls}-90-active {
        transform: rotate(-90deg);
      }
    }

    &-45 {
      &-active {
        transform: rotate(90deg);
      }

      &.up {
        transform: rotate(0deg);
      }

      &.down {
        transform: rotate(90deg);
      }

      &.up.@{prefix-cls}-45-active {
        transform: rotate(90deg);
      }

      &.down.@{prefix-cls}-45-active {
        transform: rotate(0deg);
      }
    }

    &.inset {
      line-height: 0px;
    }
  }
</style>
